/* eslint-disable */
import React from 'react';
import moment from 'moment'
import './index.less';
import Chart from 'echarts-for-react/lib/core';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/gauge';
import 'echarts/lib/component/grid';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/toolbox';

const CockpitSituational = ({data, radius}) => {
    const option = {
        tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
        },
        series: [
            {
                name: '',
                type: 'gauge',
                startAngle: 180,
                endAngle: 0,
                max: data.max || 100,
                pointer: { 
                    width: 2,
                },
                itemStyle: {
                    color: '#0cf'
                },
                splitNumber: 4,
                radius: radius || "100%",
                center : ['50%', '70%'],
                data: [data],
                axisLine: {           
                    lineStyle: {       
                        width: 3,
                        color: [[0.3, 'rgba(255, 41, 74, 1)'], [0.7, 'rgba(255, 240, 67, 1)'], [1, 'rgba(0, 255, 255, 1)']]
                    }
                },
                title: {
                    show: true,
                    offsetCenter: [0, '15px'],
                    textStyle: {
                        color: '#BCDAFF',
                        fontStyle: 'normal',
                        fontWeight: 'normal',
                        fontFamily: '微软雅黑',
                        fontSize: 14
                    }
                },
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show:false,
                },
                axisLabel: {
                    show: false,
                    fontSize: 9,
                    color: "#fff",
                    distance: -25,
                },
                detail: {
                    formatter: [
                        `{a|{value}${data.unit || ''}}`,
                        '{b|}'
                    ].join(''),
                    offsetCenter: [0, "-20px"],
                    rich: {
                        a: {
                            color: '#FFF',
                            fontSize: 16,
                        },
                        // b: {
                        //     backgroundColor: {
                        //         image: data && data.trend == 'down' ? require('../../../assets/images/pointdown.png') : require('../../../assets/images/pointtop.png')
                        //     },
                        //     width: 12,
                        // },
                    }
                }
            },{
                name: '',
                type: 'gauge',
                startAngle: 180,
                endAngle: 0,
                max: data.max || 100,
                pointer: { 
                    show: false,
                },
                splitNumber: 4,
                radius: "85%",
                center : ['50%', '70%'],
                data: [data],
                axisLine: {           
                    lineStyle: {       
                        width: 1,
                        color: [[1, '#A5A5A5']]
                    }
                },
                title: {
                    show: false,
                },
                splitLine: {
                    show: true,
                    length: 6,
                    lineStyle: {
                        color: '#A5A5A5'
                    }
                },
                axisTick: {
                    show:false,
                },
                axisLabel: {
                    show: false,

                },
                detail: {
                    show: false
                },
            }
        ]
    };    
    return (
        <div className='situational-detail'>
            <Chart
                echarts={echarts}
                option={option}
                notMerge
                lazyUpdate
                style={{ height: '100%' }}
            />
        </div>
    )
}

export default CockpitSituational





